var od = document.querySelector(".display");
var olist = document.querySelector(".list");
var ali = olist.children;

var index = 0;
od.innerText = ali[index].innerText
var s = document.createElement("span");
ali[index].appendChild(s);
od.onclick = function(eve){
    var e = eve || window.event;
    e.stopPropagation();
    olist.style.display = "block";
}

document.onclick = function(){
    olist.style.display = "none";
}

for(var i=0;i<ali.length;i++){
    ali[i].xuhao = i;
    ali[i].onclick = function(){
        od.innerText = this.innerText;
        ali[index].children[0].remove();
        var s = document.createElement("span");
        this.appendChild(s);
        index = this.xuhao;
    }
    ali[i].onmouseover = function(){
        this.className = "hover";
    }
    ali[i].onmouseout = function(){
        this.className = "";
    }
}
